<template>
  <PageWrapper title="" contentFullHeight fixedHeight>
    <div class="bg-white pt-2 h-full overflow-auto">
      <Spin :spinning="loading">
        <div class="w-1000px m-auto mb-10px">
          <Card
            title="配置管理"
            :bodyStyle="{ padding: '0' }"
            :headStyle="{ fontWeight: 'bold', textAlign: 'center', padding: '0' }"
          >
            <Descriptions bordered :column="1" :labelStyle="{ width: '430px', textAlign: 'right' }">
              <DescriptionsItem label="是否启用">
                <div class="flex gap-2">
                  <Select v-model:value="dataRef.isUse" :options="yesOrno" style="width: 100%" />
                  <Button type="primary" @click="handleSubmit('isUse')">修改</Button>
                </div>
              </DescriptionsItem>
              <DescriptionsItem label="初始化时同步方式">
                <div class="flex gap-2">
                  <Select
                    v-model:value="dataRef.isSyncDingDingToOA"
                    :options="syncType"
                    style="width: 100%"
                  />
                  <Button type="primary" @click="handleSubmit('isSyncDingDingToOA')">修改</Button>
                </div>
              </DescriptionsItem>
              <DescriptionsItem label="从钉钉同步至OA时，是否取直属主管manager_userid">
                <div class="flex gap-2">
                  <Select
                    v-model:value="dataRef.isGetManagerUserid"
                    :options="yesOrno"
                    style="width: 100%"
                  />
                  <Button type="primary" @click="handleSubmit('isGetManagerUserid')">修改</Button>
                </div>
              </DescriptionsItem>
              <DescriptionsItem label="是否同步角色">
                <div class="flex gap-2">
                  <Select
                    v-model:value="dataRef.isSyncRole"
                    :options="yesOrno"
                    style="width: 100%"
                  />
                  <Button type="primary" @click="handleSubmit('isSyncRole')">修改</Button>
                </div>
              </DescriptionsItem>
              <DescriptionsItem label="钉钉corpId">
                <div class="flex gap-2">
                  <Input v-model:value="dataRef.CORP_ID" />
                  <Button type="primary" @click="handleSubmit('CORP_ID')">修改</Button>
                </div>
              </DescriptionsItem>
              <DescriptionsItem label="钉钉帐户与系统用户关联字段">
                <div class="flex gap-2">
                  <Select
                    v-model:value="dataRef.isUserIdUse"
                    :options="associationFieldOption"
                    style="width: 100%"
                  />
                  <Button type="primary" @click="handleSubmit('isUserIdUse')">修改</Button>
                </div>
              </DescriptionsItem>
              <DescriptionsItem label="agentId">
                <div class="flex gap-2">
                  <Input v-model:value="dataRef.flowAgentId" />
                  <Button type="primary" @click="handleSubmit('flowAgentId')">修改</Button>
                </div>
              </DescriptionsItem>
              <DescriptionsItem label="appkey">
                <div class="flex gap-2">
                  <Input v-model:value="dataRef.appkey" />
                  <Button type="primary" @click="handleSubmit('appkey')">修改</Button>
                </div>
              </DescriptionsItem>
              <DescriptionsItem label="appsecret">
                <div class="flex gap-2">
                  <Input v-model:value="dataRef.appsecret" />
                  <Button type="primary" @click="handleSubmit('appsecret')">修改</Button>
                </div>
              </DescriptionsItem>
              <DescriptionsItem label=" 从钉钉同步帐户(userid)至系统，只需在初始化时同步一次">
                <Button type="primary" @click="handleSync">同步用户</Button>
              </DescriptionsItem>
            </Descriptions>
          </Card>
        </div>
      </Spin>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { Descriptions, Input, Select, Button, Card, Spin } from 'ant-design-vue';
  const DescriptionsItem = Descriptions.Item;
  import {
    getPublicDingdingConfigDingdingPage,
    getPublicDingdingConfigDingding,
    getUserSynAll,
  } from '/@/api/system/system';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage, createConfirm } = useMessage();
  import { yesOrno, syncType, associationFieldOption } from './ddconfig.data';
  import { PageWrapper } from '/@/components/Page';
  const loading = ref(false);
  const dataRef = ref<Recordable>({});
  const fetch = async () => {
    loading.value = true;
    const res = await getPublicDingdingConfigDingdingPage();
    loading.value = false;
    res?.config?.forEach((item) => {
      console.log(item.name, item.value);
      dataRef.value[item.name] = item.value;
    });
  };
  onMounted(fetch);

  const handleSubmit = async (key) => {
    try {
      const formData = {
        name: key,
        value: dataRef.value[key],
      };
      loading.value = true;
      await getPublicDingdingConfigDingding(formData);
      createMessage.success('操作成功');
      loading.value = false;
      fetch();
    } catch (error) {
      loading.value = false;
    }
  };

  const handleSync = () => {
    createConfirm({
      iconType: 'warning',
      title: '提示',
      content: '确定同步吗？',
      onOk: async () => {
        try {
          const formData = {
            op: 'syncDing',
          };
          loading.value = true;
          await getUserSynAll(formData);
          createMessage.success('操作成功');
          loading.value = false;
        } catch (error) {
          loading.value = false;
        }
      },
    });
  };
</script>
<style lang="less" scoped>
  :deep(.ant-card-head-title) {
    padding: 10px 0;
  }
  :deep(.ant-card-head) {
    min-height: 30px;
  }
</style>
